<template>
<div id="main">
  <div id="background">
    <transition mode="out-in">
        <Card id="login_card">
          <div id="title">
              <label style="font-weight:bold">账号密码登录</label>
              <label style="color:blue；margin-right:90%">立即注册</label>
          </div>
          <div id="form" >
              <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80" label-width='40px' >
                <FormItem label="" prop="passwd" >
                    <Input type="password" v-model="formCustom.passwd" placeholder="用户名" ></Input>
                </FormItem>
                <FormItem label="" prop="passwdCheck">
                    <Input type="password" v-model="formCustom.passwdCheck" placeholder="密码"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formCustom')" style="width:240px;margin-top:20px">登录</Button>
                </FormItem>
              </Form>
          </div>
      </Card>
    </transition>
      
      
  </div>
</div>
  
</template>

<script >

export default {
  data () {
     const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    if (this.formCustom.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formCustom.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
           
            
            return {
                formCustom: {
                    passwd: '',
                    passwdCheck: '',
                    age: ''
                },
                ruleCustom: {
                    passwd: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                }
            }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style scoped>
#login_card{
  width: 300px;
  height:300px;
  margin-left:60%;
  margin-top: 220px;
}

#background{
  width: 100%;
  height: 100%;
	background-image: url('../assets/插画底图.jpg');
	background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
	/* overflow: hidden; */
	/* overflow: auto; */
	z-index: -1;
}

#main{
  width: 100%;
  height: 100%;
}

#form{
  margin-left: 0px;
  margin-top: 4%;
}

#title{
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content:space-between;
}


    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }

</style>